<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: gold;
    }
    .line{
      font-size: 50px;
      font-family: "Times New Roman";
    }
  </style>
</head>
<body>
<div id="app">
  <!--可能变换的class用v-bind绑定，并用boolean值控制-->
  <!--<h2 :class="{类名1: boolean变量, 类名2: boolean变量, ...}">{{message}}</h2>-->
  <h2 :class="{active: isactive, line: isline}">{{message}}</h2>
  <h2 :class="getClass()">{{message}}</h2>
  <!--数组方法，固定的，也可能是变量-->
  <h2 :class="[active,'line']">{{message}}</h2>
  <!--方法4计算属性-->
  <button v-on:click="btnClick">换颜色</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hi',
      active: 'active',
      isactive: true,
      isline: true
    },
    methods: {
      btnClick:function () {
        this.isactive=!this.isactive
      },
      getClass:function () {
        return {active: this.isactive, line: this.isline}
      }
    }
  })

</script>
</body>
</html>